<template>
  <span v-if="tagType === 'span'" @click="handlerPush" class="jump-route">{{ title }}</span>
  <a v-if="tagType === 'a'" @click="handlerPush">{{ title }}</a>
</template>

<script lang="ts" setup>
  import { openWindow } from "/@/utils"
  import { useRouter } from "vue-router"
  const router = useRouter()
  const props = defineProps({
    tagType: { type: String, default: "a" },
    title: { type: String, default: "" },
    // 跳转的数据
    query: { type: Object },
    path: { type: String },
  })

  const handlerPush = () => {
    console.log("jump route: ", props)
    if (props.path?.startsWith("http")) {
      window.open(props.path, "_blank")
      return
    }

    router.push({
      name: props.path,
      query: props.query,
    })
  }
</script>

<style lang="less" scoped>
  span:hover {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
  }
</style>
